<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .con{
            position: relative;
            width: 228px;
            height: 270px;
            background-color: #fff;
            box-shadow: 2px 2px 2px rgba(0,0,0,.3);
        }

        .hot{
            position: absolute;
            top: 4px;
            right: -4px;
        }

        .pic{
            width: 100%;
        }

        h4{
            margin: 20px 20px 20px 25px;
            font-size: 14px;
            font-weight: 400;
        }

        .info{
            margin-left: 25px;
        }

        .info span{
            color: red;
        }
    </style>
</head>
<body>
    <div class="con">
        <img class="hot" src="hot.png" alt="">
        <img class="pic" src="pic.png" alt="">
        <h4> 
            Think PHP 5.0 博客系统实战项目演练
        </h4>
        <div class="info">
            <span>高级</span> · 1125人在学习
        </div>
    </div>
</body>
</html>